<template>
  <div class="article-list" ref="list" @scroll="rememberScroll">
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-item
          :article="article"
          v-for="article in articleList"
          :key="article.art_id"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import articleItem from './article-item.vue'
import { getArticleListByCID } from '@/api/home'
export default {
  props: ['cid'],
  components: {
    articleItem
  },
  //   这是生命周期函数（keep-alive）
  activated () {
    //   当你重新回到首页的时候 将this.scrollTop 赋值给this.$refs.list.scrollTop
    this.$refs.list.scrollTop = this.scrollTop
  },
  methods: {
    rememberScroll () {
      //    记录滚动的位置
    //   console.log(this.$refs.list.scrollTop)
      this.scrollTop = this.$refs.list.scrollTop
    },
    async onRefresh () {
      this.isRefreshing = true
      //   刷新页面的函数
      console.log('下拉刷新')
      //
      const [err, data] = await getArticleListByCID(this.cid, +new Date())
      if (err) return this.$toast.fail(err)
      // 直接覆盖数据就可以了
      this.articleList = data.data.data.results
      this.isRefreshing = false
    },
    async onLoad () {
      this.loading = true
      // 初始化的时候 因为没有文字内容，所以默认触底，因此在初始化的时候就自动执行了一次。
      console.log('触底的时候自动执行函数')
      const [err, data] = await getArticleListByCID(this.cid, this.timeStamp)
      if (err) return this.$toast.fail(err)

      this.articleList.push(...data.data.data.results)

      if (!data.data.data.pre_timestamp) {
        //   如果pre_timestamp 为空，说明数据没有更多了，那么就直接设置
        this.finished = true
      } else {
        // 为下一次请求做准备，为请求更多数据做准备
        this.timeStamp = data.data.data.pre_timestamp
      }

      this.loading = false
    }
  },
  data () {
    return {
      isRefreshing: false,
      loading: false,
      finished: false,
      articleList: [],
      timeStamp: +new Date(),
      scrollTop: 0
    }
  },
  async created () {
    // const [err, data] = await getArticleListByCID(this.cid, this.timeStamp)
    // if (err) return this.$toast.fail(err)
    // this.articleList = data.data.data.results
    // this.timeStamp = data.data.data.pre_timestamp
  }
}
</script>
<style scoped>
.article-list {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px;
}
</style>
